<template>
    <m-navbar title="成绩详情"/>
    <view class="content-wrap flex-itemsCenter-box flex-wrap p-12">
        <view class="w-full rounded-10 overflow-hidden common-shadow py-10 examination-wrapper">
            <view
                class="mx-16 box-border examination flex-justifyBetween-itemsCenter-box"
                v-for="item in examinationList"
                :key="item.id"
            >
                <template v-if="item.id === 0">
                    <view class="text-600">科目</view>
                    <view class="text-600">分数</view>
                    <view class="text-600">总分</view>
                </template>
                <template v-else>
                    <view>{{ item.courseName }}</view>
                    <view>{{ item.courseMark }}</view>
                    <view>{{ item.total }}</view>
                </template>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import {getUserMark} from "@/api/modules/achievement";

const examinationList: any[] = ref([
	{ id: 0, courseName: '科目', courseMark: '分数', total: '总分' },
	// { id: 1, subId: 11, name: '语文', num: 99, total: 150 },
	// { id: 2, subId: 11, name: '数学', num: 99, total: 150 },
	// { id: 3, subId: 11, name: '英语', num: 99, total: 150 },
	// { id: 4, subId: 11, name: '政治', num: 99, total: 150 },
	// { id: 5, subId: 11, name: '历史', num: 99, total: 150 },
	// { id: 6, subId: 11, name: '地理', num: 99, total: 150 }
])

const getMarkInfo = () => {
    const { classId, studentId } = uni.getStorageSync('userInfo')
    const { examId } =  uni.getStorageSync('markInfo')
    getUserMark({
        examId,
        userId: studentId,
        classNumber: classId
    }).then(res => {
        examinationList.value = [
            { id: 0, courseName: '科目', courseMark: '分数', total: '总分' },
            ...res.rows.map(item => {
                item.total = 100
                return item
            })
        ]
        // examinationList.value.push([...res.rows])
        console.log('res', res)
    })
}

onShow(() => {
    getMarkInfo()
})
</script>

<style scoped lang="scss">
.class-box {
    width: calc(50% - 10rpx);
}

.examination {
    border-bottom: 1px solid #c0c0c0;
    padding: 30rpx 60rpx;
    width: calc(100% - 64rpx);
}

.content-wrap {
    padding-bottom: 10px;
}

.examination-wrapper {
    & :last-child {
        border-bottom: none;
    }
}
</style>
